<template>
  <view class="sumbox">
      <label class="radio">
        <radio :checked="isAllChecked" color="#C00000" @click="allCheckedChange" /><text>全选</text>
      </label>
      <view class="sum">
        合计: <text style="margin-left: 10px;">${{checkedPriceSum}}元</text>
      </view>
      <view class="sumupbtn">
        结算({{checkedCount}})
      </view>
  </view>
</template>

<script>
  import {mapGetters,mapMutations} from 'vuex'
  export default {
    name:"sumup",
    data() {
      return {
        
      };
    },
    // 选中商品数量
    computed:{
      ...mapGetters('m_cart',['checkedCount','total','checkedPriceSum']),
      isAllChecked(){
        // 如果购物车总数和选中商品总数相等则说明全选框处于选中状态
        return this.checkedCount === this.total
      }
    },
    methods:{
      // 全选按钮改变赋值
      ...mapMutations('m_cart',['allBtnChange']),
      allCheckedChange(){
        this.allBtnChange(!this.isAllChecked)
      }
    }
  }
</script>

<style lang="scss">
  .sumbox {
    border-top: 1px solid #CCCCCC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 999;
    font-size: 14px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    .sum {
      text {
        font-weight: bold;
        color: #C00000;
      }
    }
    .sumupbtn {
      height: 50px;
      color: #FFFFFF;
      text-align: center;
      line-height: 50px;
      min-width: 150px;
      background-color: #C00000;
    }
  }
</style>
